<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
<!--        <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta name="apple-mobile-web-app-capable" content="yes" /><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/theme.css.xhtml?ln=primefaces-rio" /><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=5.3" /><script type="text/javascript" src="/rio/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=5.3"></script><script type="text/javascript" src="/rio/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=5.3"></script><script type="text/javascript" src="/rio/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.3"></script><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/css/core-layout.css.xhtml?ln=rio-layout" /><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/css/animate.css.xhtml?ln=rio-layout" /><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/css/rio-font.css.xhtml?ln=rio-layout" /><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/css/ripple-effect.css.xhtml?ln=rio-layout" /><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/css/perfect-scrollbar.css.xhtml?ln=rio-layout" /><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/css/font-awesome.css.xhtml?ln=rio-layout" /><link type="text/css" rel="stylesheet" href="/rio/javax.faces.resource/css/rio-layout.css.xhtml?ln=rio-layout" /><script type="text/javascript">if(window.PrimeFaces){}</script>
        <title>PrimeFaces Rio</title><script type="text/javascript" src="/rio/javax.faces.resource/js/ripple-effect.js.xhtml?ln=rio-layout"></script><script type="text/javascript" src="/rio/javax.faces.resource/js/perfect-scrollbar.js.xhtml?ln=rio-layout"></script><script type="text/javascript" src="/rio/javax.faces.resource/js/layout.js.xhtml?ln=rio-layout"></script></head><body>


    <div id="layout-topbar">
    	<div id="logo" class="Fleft">
        	<a href="#"><img src="/rio/javax.faces.resource/images/logo.svg.xhtml?ln=rio-layout" class="Fleft" /></a>
            <a id="mobile-menu-button" class="Fright ShowOnMobile ripplelink Unselectable ShadowEffect"><i class="icon-add186"/></a>
        </div>

        <a class="ripplelink WhiteBlue Fright ShowOnMobile" id="show-top-menu"><i class="icon-show8"/></a>

        <ul id="top-menu" class="ShowOnDesktop">
            <li>
                <a class="ripplelink"><i class="icon-search100"/> <span class="Txt">Search</span></a>
                <ul>
                    <li><input type="text" placeholder="Search" /></li>
                </ul>
            </li>
            <li>
                <a class="ripplelink"><i class="icon-set6"/> <span class="Txt">Tasks</span></a>
                <ul>
                    <li><a href="#">23 New Tasks</a></li>
                </ul>
            </li>
            <li>
                <a class="ripplelink"><i class="icon-notifications1"/> <span class="Txt">Alerts</span></a>
                <ul>
                    <li><a href="#">18 Alerts</a></li>
                </ul>
            </li>
            <li><a href="#" class="ripplelink"><i class="icon-wifi83"/> <span class="Txt">System Settings</span></a></li>
        </ul>
    </div>

        <div id="wrapper">
            <div id="wrapperIndent">

    <div class="Animated05" id="layout-menu-cover">
        <ul class="layout-menu">
            <li>
                <a class="menulink ripplelink">
                    <i class="icon-round58 Fs40"/>
                    <span class="Fs18">John Wilkins<i class="icon-downwards Fright Fs20"/><br /><span class="Fs12 FontRobotoLight">Sr. System Administrator</span></span>
                </a>
                <ul>
                    <li><a href="#" class="menulink ripplelink"><i class="icon-user158 Fs16"/> User Profile</a></li>
                    <li><a href="#" class="menulink ripplelink"><i class="icon-two385 Fs16"/> Change User</a></li>
                    <li><a href="#" class="menulink ripplelink"><i class="icon-settings49 Fs16"/> System Settings</a></li>
                    <li><a href="#" class="menulink ripplelink"><i class="icon-thermostat1 Fs16"/> Logout</a></li>
                </ul>
            </li>
        </ul>
        <div class="Separator"/><ul id="j_idt14" class="layout-menu rio-menu"><li id="rm_dashboard" role="menuitem"><a class="menulink ripplelink" href="/rio/dashboard.xhtml"><i class="icon-ellipsis1"/><i class="icon-planet29"/>Dashboard</a></li><li id="rm_promotion" role="menuitem"><a class="menulink ripplelink" href="/rio/promotion-page.xhtml"><i class="icon-ellipsis1"/><i class="icon-feather"/>Promotion Page</a></li><li id="rm_theme" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-mountains14"/> Rio Theme</a><ul role="menu"><li id="rm_sample" role="menuitem"><a class="menulink ripplelink" href="/rio/sample.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-columns"/>Sample Page</a></li><li id="rm_forms" role="menuitem"><a class="menulink ripplelink" href="/rio/forms.xhtml"><i class="icon-ellipsis1"/><i class="icon-browser"/>Form Elements</a></li><li id="rm_data" role="menuitem"><a class="menulink ripplelink" href="/rio/data.xhtml"><i class="icon-ellipsis1"/><i class="icon-calendar"/>Data Components</a></li><li id="rm_datatable" role="menuitem"><a class="menulink ripplelink" href="/rio/datatable.xhtml"><i class="icon-ellipsis1"/><i class="icon-grid-alt"/>DataTable</a></li><li id="rm_panels" role="menuitem"><a class="menulink ripplelink" href="/rio/panel.xhtml"><i class="icon-ellipsis1"/><i class="icon-screen47 Fs16"/>Panels</a></li><li id="rm_overlays" role="menuitem"><a class="menulink ripplelink" href="/rio/overlay.xhtml"><i class="icon-ellipsis1"/><i class="icon-windows-1"/>Overlays</a></li><li id="rm_menus" role="menuitem"><a class="menulink ripplelink" href="/rio/menu.xhtml"><i class="icon-ellipsis1"/><i class="icon-link60 Fs16"/>Menus</a></li><li id="rm_messages" role="menuitem"><a class="menulink ripplelink" href="/rio/messages.xhtml"><i class="icon-ellipsis1"/><i class="icon-notifications1 Fs16"/>Messages</a></li><li id="rm_charts" role="menuitem"><a class="menulink ripplelink" href="/rio/charts.xhtml"><i class="icon-ellipsis1"/><i class="icon-poll Fs16"/>Charts</a></li><li id="rm_fileupload" role="menuitem"><a class="menulink ripplelink" href="/rio/file.xhtml"><i class="icon-ellipsis1"/><i class="icon-task"/>FileUpload</a></li><li id="rm_misc" role="menuitem"><a class="menulink ripplelink" href="/rio/misc.xhtml"><i class="icon-ellipsis1"/><i class="icon-nfc1"/>Misc</a></li></ul></li><li id="rm_default" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-copy31"/> Default Pages</a><ul role="menu"><li id="rm_empty" role="menuitem"><a class="menulink ripplelink" href="/rio/empty-page.xhtml"><i class="icon-ellipsis1"/><i class="icon-ipad"/>Empty Page</a></li><li id="rm_login" role="menuitem"><a class="menulink ripplelink" href="/rio/login.xhtml"><i class="icon-ellipsis1"/><i class="icon-in-alt"/>Login Page</a></li><li id="rm_error" role="menuitem"><a class="menulink ripplelink" href="/rio/error.xhtml"><i class="icon-ellipsis1"/><i class="icon-close"/>Error Page</a></li><li id="rm_404" role="menuitem"><a class="menulink ripplelink" href="/rio/404.xhtml"><i class="icon-ellipsis1"/><i class="icon-close"/>404 Page</a></li><li id="rm_access" role="menuitem"><a class="menulink ripplelink" href="/rio/access-denied.xhtml"><i class="icon-ellipsis1"/><i class="icon-turn17"/>Access Denied Page</a></li></ul></li><li id="rm_hierarchy" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-share39"/> Menu Hierarchy</a><ul role="menu"><li id="rm_sm1" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-folder215"/> Submenu 1<i class="icon-downwards Fright Fs16"/></a><ul class="menu-level-1" role="menu"><li id="rm_sm11" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-folder215"/> Submenu 1.1<i class="icon-downwards Fright Fs16"/></a><ul class="menu-level-2" role="menu"><li id="rm_sm111" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-folder215"/> Submenu 1.1.1<i class="icon-downwards Fright Fs16"/></a><ul class="menu-level-3" role="menu"><li id="rm_lnk1111" role="menuitem"><a class="menulink ripplelink" href="#"><i class="icon-ellipsis1"/><i class="icon-link60"/>Link 1</a></li><li id="rm_lnk1112" role="menuitem"><a class="menulink ripplelink" href="#"><i class="icon-ellipsis1"/><i class="icon-link60"/>Link 2</a></li><li id="rm_lnk1113" role="menuitem"><a class="menulink ripplelink" href="#"><i class="icon-ellipsis1"/><i class="icon-link60"/>Link 3</a></li></ul></li></ul></li></ul></li><li id="rm_sm2" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-folder215"/> Submenu 2<i class="icon-downwards Fright Fs16"/></a><ul class="menu-level-1" role="menu"><li id="rm_22" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-folder215"/> Submenu 2.2<i class="icon-downwards Fright Fs16"/></a><ul class="menu-level-2" role="menu"><li id="rm_221" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-folder215"/> Submenu 2.2.1<i class="icon-downwards Fright Fs16"/></a><ul class="menu-level-3" role="menu"><li id="rm_lnk2211" role="menuitem"><a class="menulink ripplelink" href="#"><i class="icon-ellipsis1"/><i class="icon-link60"/>Link 1</a></li><li id="rm_lnk2212" role="menuitem"><a class="menulink ripplelink" href="#"><i class="icon-ellipsis1"/><i class="icon-link60"/>Link 2</a></li><li id="rm_lnk2213" role="menuitem"><a class="menulink ripplelink" href="#"><i class="icon-ellipsis1"/><i class="icon-link60"/>Link 3</a></li></ul></li></ul></li></ul></li></ul></li><li id="rm_icons" role="menuitem"><a class="menulink ripplelink" href="/rio/font-icons.xhtml"><i class="icon-ellipsis1"/><i class="icon-automatic2"/>Font Icons</a></li><li id="rm_docs" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="icon-receipt9"/> Documentation</a><ul role="menu"><li id="rm_docs_core" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="fa fa-code"/> Core CSS Docs<i class="icon-downwards Fright Fs16"/></a><ul class="menu-level-1" role="menu"><li id="rm_docs_1" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/installation.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Installation</a></li><li id="rm_docs_2" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/menus.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Menus</a></li><li id="rm_docs_3" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/responsive-mode.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Responsive Mode</a></li><li id="rm_docs_4" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/containerx.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>ContainerX</a></li><li id="rm_docs_5" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/widx.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>WidX</a></li><li id="rm_docs_6" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/selection.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Selection</a></li><li id="rm_docs_7" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/visibilities.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Visibility</a></li><li id="rm_docs_8" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/displaying.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Displaying</a></li><li id="rm_docs_9" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/positioning.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Positioning</a></li><li id="rm_docs_10" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/underline.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Underline</a></li><li id="rm_docs_11" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/floating.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Floating</a></li><li id="rm_docs_12" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/overflows.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Overflows</a></li><li id="rm_docs_13" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/empty-boxes.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Empty Boxes</a></li><li id="rm_docs_14" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/opacity.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Opacity</a></li><li id="rm_docs_15" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/text-aligning.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Text Aligning</a></li><li id="rm_docs_16" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/box-sizing.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Box Sizing</a></li><li id="rm_docs_17" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/font-size.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Font Size</a></li><li id="rm_docs_18" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/font-weights.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Font Weights</a></li><li id="rm_docs_19" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/core/transitions.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Transitions</a></li></ul></li><li id="rm_docs_layout" role="menuitem"><a href="#" class="menulink ripplelink"><i class="icon-ellipsis1"/><i class="fa fa-code"/> Layout CSS Docs<i class="icon-downwards Fright Fs16"/></a><ul class="menu-level-1" role="menu"><li id="rm_docs_20" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/layout/less.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Less</a></li><li id="rm_docs_21" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/layout/cards.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Cards</a></li><li id="rm_docs_22" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/layout/text-colors.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Text Colors</a></li><li id="rm_docs_23" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/layout/background-colors.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Background Colors</a></li><li id="rm_docs_24" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/layout/borders.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Borders</a></li><li id="rm_docs_25" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/layout/separators.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Separators</a></li><li id="rm_docs_26" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/layout/effects.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Effects</a></li><li id="rm_docs_27" role="menuitem"><a class="menulink ripplelink" href="/rio/docs/layout/roboto-font.xhtml"><i class="icon-ellipsis1"/><i class="fa fa-book"/>Roboto Font</a></li></ul></li></ul></li><li class="Separator"/></ul><script type="text/javascript">Rio.restoreMenuState();</script>

    </div>

                <div id="layout-portlets-cover">-->

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect  ">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h2 class="TexAlCenter BigTopic">DataTable</h2>
                    <h:form id="form">
                        <p:dataTable id="singleDT"
                                     var="car"
                                     value="#{dtSelectionView.cars1}"
                                     reflow="true"
                                     rows="10"
                                     paginator="true"
                                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                     currentPageReportTemplate="({currentPage} of {totalPages})"
                                     rowsPerPageTemplate="5,10,15"
                                     selectionMode="single"
                                     selection="#{dtSelectionView.selectedCar}"
                                     rowKey="#{car.id}">

                            <p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()"/>

                            <f:facet name="header">
                                Car Sales Ranks
                            </f:facet>

                            <p:column headerText="Id" footerText="Id" sortBy="#{car.id}">
                                <h:outputText value="#{car.id}" />
                            </p:column>

                            <p:column headerText="Year" footerText="Year" sortBy="#{car.year}">
                                <h:outputText value="#{car.year}" />
                            </p:column>

                            <p:column headerText="Brand" footerText="Brand" sortBy="#{car.brand}">
                                <h:outputText value="#{car.brand}" />
                            </p:column>

                            <p:column headerText="Color" footerText="Color" sortBy="#{car.color}">
                                <h:outputText value="#{car.color}" />
                            </p:column>
                        </p:dataTable>

                        <p:dialog header="Car Info"
                                  widgetVar="carDialog"
                                  modal="true"
                                  showEffect="fade"
                                  hideEffect="fade"
                                  resizable="false"
                                  responsive="true">
                            <p:outputPanel id="carDetail" style="text-align:center;">
                                <p:panelGrid columns="2"
                                             layout="grid"
                                             styleClass="ui-panelgrid-blank"
                                             rendered="#{not empty dtSelectionView.selectedCar}">
                                    <f:facet name="header">
                                        <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                                    </f:facet>

                                    <h:outputText value="Id:" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                                    <h:outputText value="Year" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                                    <h:outputText value="Color:" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                                    <h:outputText value="Price" style="font-weight: bold"/>
                                    <h:outputText value="\$#{dtSelectionView.selectedCar.price}" />
                                </p:panelGrid>
                            </p:outputPanel>
                        </p:dialog>
                    </h:form>
<!--<form id="form" name="form" method="post" action="/rio/datatable.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<div id="form:singleDT" class="ui-datatable ui-widget ui-datatable-reflow"><div class="ui-datatable-header ui-widget-header ui-corner-top">
                                        Car Sales Ranks
                                    </div><div id="form:singleDT_paginator_top" class="ui-paginator ui-paginator-top ui-widget-header" role="navigation"><span class="ui-paginator-current">(1 of 5)</span> <span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-first">p</span></span><span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-prev">p</span></span><span class="ui-paginator-pages"><span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all" tabindex="0">1</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">2</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">3</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">4</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">5</span></span><span class="ui-paginator-next ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-next">p</span></span><span class="ui-paginator-last ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-end">p</span></span><select id="form:singleDT_rppDD" name="form:singleDT_rppDD" class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" autocomplete="off"><option value="5">5</option><option value="10" selected="selected">10</option><option value="15">15</option></select></div><div class="ui-datatable-tablewrapper"><table role="grid"><thead id="form:singleDT_head"><tr role="row"><th id="form:singleDT:j_idt20" class="ui-state-default ui-sortable-column" role="columnheader"><span class="ui-column-title">Id</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th><th id="form:singleDT:j_idt22" class="ui-state-default ui-sortable-column" role="columnheader"><span class="ui-column-title">Year</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th><th id="form:singleDT:j_idt24" class="ui-state-default ui-sortable-column" role="columnheader"><span class="ui-column-title">Brand</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th><th id="form:singleDT:j_idt26" class="ui-state-default ui-sortable-column" role="columnheader"><span class="ui-column-title">Color</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th></tr></thead><tfoot id="form:singleDT_foot"><tr><td class="ui-state-default">Id</td><td class="ui-state-default">Year</td><td class="ui-state-default">Brand</td><td class="ui-state-default">Color</td></tr></tfoot><tbody id="form:singleDT_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" data-rk="43f352c2" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">43f352c2</td><td role="gridcell">1987</td><td role="gridcell">Renault</td><td role="gridcell">Maroon</td></tr><tr data-ri="1" data-rk="83f6eef6" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">83f6eef6</td><td role="gridcell">1999</td><td role="gridcell">Audi</td><td role="gridcell">Maroon</td></tr><tr data-ri="2" data-rk="cd26ab90" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">cd26ab90</td><td role="gridcell">1963</td><td role="gridcell">Fiat</td><td role="gridcell">Maroon</td></tr><tr data-ri="3" data-rk="67ee7563" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">67ee7563</td><td role="gridcell">1980</td><td role="gridcell">Renault</td><td role="gridcell">Silver</td></tr><tr data-ri="4" data-rk="6035053c" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">6035053c</td><td role="gridcell">1995</td><td role="gridcell">BMW</td><td role="gridcell">Yellow</td></tr><tr data-ri="5" data-rk="6d3efb5b" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">6d3efb5b</td><td role="gridcell">1973</td><td role="gridcell">Honda</td><td role="gridcell">Red</td></tr><tr data-ri="6" data-rk="90cc256c" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">90cc256c</td><td role="gridcell">1979</td><td role="gridcell">BMW</td><td role="gridcell">White</td></tr><tr data-ri="7" data-rk="0e0fd481" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">0e0fd481</td><td role="gridcell">2005</td><td role="gridcell">Audi</td><td role="gridcell">Green</td></tr><tr data-ri="8" data-rk="f1ad903b" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">f1ad903b</td><td role="gridcell">1978</td><td role="gridcell">Honda</td><td role="gridcell">Orange</td></tr><tr data-ri="9" data-rk="1b896003" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">1b896003</td><td role="gridcell">2004</td><td role="gridcell">Volkswagen</td><td role="gridcell">White</td></tr></tbody></table></div><div id="form:singleDT_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header ui-corner-bottom" role="navigation"><span class="ui-paginator-current">(1 of 5)</span> <span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-first">p</span></span><span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-prev">p</span></span><span class="ui-paginator-pages"><span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all" tabindex="0">1</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">2</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">3</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">4</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">5</span></span><span class="ui-paginator-next ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-next">p</span></span><span class="ui-paginator-last ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-end">p</span></span><select id="form:singleDT_rppDD" name="form:singleDT_rppDD" class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" autocomplete="off"><option value="5">5</option><option value="10" selected="selected">10</option><option value="15">15</option></select></div><input type="hidden" id="form:singleDT_selection" name="form:singleDT_selection" autocomplete="off" value="" /></div><script id="form:singleDT_s" type="text/javascript">$(function(){PrimeFaces.cw("DataTable","widget_form_singleDT",{id:"form:singleDT",paginator:{id:['form:singleDT_paginator_top','form:singleDT_paginator_bottom'],rows:10,rowCount:50,page:0,currentPageTemplate:'({currentPage} of {totalPages})'},selectionMode:"single",reflow:true,behaviors:{rowSelect:function(ext,event) {PrimeFaces.ab({s:"form:singleDT",e:"rowSelect",p:"form:singleDT",u:"form:carDetail",onco:function(xhr,status,args){PF('carDialog').show();}},ext);}}});});</script><div id="form:j_idt28" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container"><div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"><span id="form:j_idt28_title" class="ui-dialog-title">Car Info</span><a href="#" class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all"><span class="ui-icon ui-icon-closethick"></span></a></div><div class="ui-dialog-content ui-widget-content"><div id="form:carDetail" class="ui-outputpanel ui-widget" style="text-align:center;"></div></div></div><script id="form:j_idt28_s" type="text/javascript">$(function(){PrimeFaces.cw("Dialog","carDialog",{id:"form:j_idt28",resizable:false,modal:true,showEffect:"fade",hideEffect:"fade",responsive:true});});</script><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="5729272440189211220:-899175559864821706" autocomplete="off" />
</form>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>


    <!-- FOOTER  -->
<!--    <div class="Container100">
        <div class="ContainerIndent">
            <div class="Card ShadowEffect">
                <div class="Container100" style="" id="footerlinks">
                    <a href="#" class="DispInlBlock FontSourceSansLight Blue Fs12 Fleft HoverEffect">TERMS OF CONDITIONS</a>
                    <span class="Fleft BoldGray Fs12" style="padding:0px 5px;">|</span>
                    <a href="#" class="DispInlBlock FontSourceSansLight Blue Fs12 Fleft HoverEffect">SITEMAP</a>
                    <span class="Fleft BoldGray Fs12" style="padding:0px 5px;">|</span>
                    <a href="#" class="DispInlBlock FontSourceSansLight Blue Fs12 Fleft HoverEffect">PRIVACY</a>
                    <span class="Fleft BoldGray Fs12" style="padding:0px 5px;">|</span>
                    <a href="#" class="DispInlBlock FontSourceSansLight Blue Fs12 Fleft HoverEffect">LINKING POLICY</a>

                    <div class="EmptyBox10 ShowOnMobile"/>
                    <span class="DispInlBlock FontSourceSansLight BoldGray Fs12 Fright HoverEffect TexAlRight FloatNoneOnMobile"> PrimeFaces Rio Theme And Layout</span>
                </div>

                <div class="EmptyBox10"/>

                <div class="Container50 Responsive100"><img src="/rio/javax.faces.resource/images/logo-dark.svg.xhtml?ln=rio-layout" style="height:20px;" class="" />
                    <div class="EmptyBox10"/>
                    <span class="DispBlock Wid100 FontSourceSansLight BoldGray Fs12 HoverEffect">+1 888 123 4567 <br /> info@riorio.com</span>
                </div>
                <div class="Container50 Responsive100">
                    <div class="DispInlBlock Fright">
                        <a href="#layout-footer" class="Blue Fs30"><i class="fa fa-facebook-square"/></a>
                        <a href="#layout-footer" class="Blue Fs30"><i class="fa fa-twitter-square"/></a>
                        <a href="#layout-footer" class="Blue Fs30"><i class="fa fa-linkedin-square"/></a>
                        <a href="#layout-footer" class="Blue Fs30"><i class="fa fa-google-plus-square"/></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

                </div><div id="j_idt44" style="width:32px;height:32px;position:fixed;right:7px;bottom:7px"><div id="j_idt44_start" style="display:none"><img id="j_idt45" src="/rio/javax.faces.resource/images/preloader.gif.xhtml?ln=rio-layout" alt="" /></div><div id="j_idt44_complete" style="display:none"></div></div><script id="j_idt44_s" type="text/javascript">$(function(){PrimeFaces.cw("AjaxStatus","widget_j_idt44",{id:"j_idt44"});});</script>
            </div>
        </div></body>

</html>-->
    </ui:define>
</ui:composition>
